<template>
  <div>
    <el-dialog title="资金流水" :visible.sync="dialogVisible" :before-close="cancelFn" width="780px">
      <el-form ref="memberRef" :inline="true" :model="searchForm" label-position="right" label-width="80px">
        <el-form-item label="开始时间:">
          <el-date-picker v-model="searchForm.startTime" type="datetime" placeholder="选择日期时间"
            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="dateStartPickerOptions"
            default-time="00:00:00">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间:">
          <el-date-picker v-model="searchForm.endTime" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" :picker-options="dateEndPickerOptions" default-time="23:59:59">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button size="small" @click="getList">查询</el-button>
          <!-- <el-button type="primary" size="small" icon="el-icon-download" @click="handleExport"
            :disabled="total<=0">导出报表</el-button> -->
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="list">
        <el-table-column label="会员名" align="center" prop="memberName" />
        <!-- <el-table-column label="车主名" align="center" prop="companyName"></el-table-column> -->
        <!-- <el-table-column label="会员卡号" align="center" prop="memberCard" /> -->
        <el-table-column label="金额类型" align="center" prop="amtTypeName" />
        <el-table-column label="变化金额" align="center" prop="amt" />
        <el-table-column label="账户余额" align="center" prop="afterAmt" />
        <el-table-column label="单位" align="center" prop="unit" />
        <!-- <el-table-column label="班次号" align="center" prop="shiftNo" /> -->
        <el-table-column label="操作站点" align="center" prop="optStationName" />
        <el-table-column label="操作员工" align="center" prop="optEmpName" />
        <el-table-column label="变化时间" align="center" prop="createTime" width="155" />
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
        @pagination="getList" />
    </el-dialog>
  </div>
</template>

<script>
  import {
    acc
  } from '@/api/fleet'
  import {
    downloadBinaryFile
  } from '@/utils';
  export default {
    name: 'cashFlow',
    data() {
      return {
        searchForm: {},
        loading: true,
        dialogVisible: false,
        list: [],
        searchForm: {
          pageSize: 10,
          pageNum: 1
        },
        total: 0,
        dateStartPickerOptions: {
          // 限制不可选择之前的日期
          disabledDate: (time) => {
            if (this.searchForm.endTime) {
              return (
                time.getTime() > new Date(this.searchForm.endTime).getTime() - 8.64e7
              );
            } else {
              return (time.getTime() > Date.now())
            }
          }
        },
        dateEndPickerOptions: {
          disabledDate: (time) => {
            if (this.searchForm.startTime) {
              return (time.getTime() < new Date(this.searchForm.startTime).getTime() || time.getTime() > Date.now());
            } else {
              return (time.getTime() > Date.now())
            }
          }
        },
      }
    },
    created() {
      let range = this.timeForRange(-7)
      this.searchForm.startTime = range[0]
      this.searchForm.endTime = range[1]
    },
    methods: {
      open(row) {
        if (row) {
          if (row.memberId > 0) {
            this.searchForm.memberId = row.memberId;
          } else if (row.companyId > 0) {
            this.searchForm.companyId = row.companyId
          } else {
            this.$message.error('参数错误');
            return
          }
          this.getList()
          this.$nextTick(() => {
            this.dialogVisible = true;
          })
        }
      },
      getList() {
        try {
          this.loading = true;
          acc({
            ...this.searchForm
          }).then(res => {
            if (res.code === 200) {
              this.list = res.data.rows;
              this.total = parseInt(res.data.total);
              this.loading = false
            }
          })
        } catch (error) {
          this.loading = false;
        }
      },
      handleExport() {
        accExport({
          ...this.searchForm
        }).then(res => {
          if (res) {
            downloadBinaryFile(res, `资金流水_${new Date().getTime()}.xlsx`)
          } else {
            this.$message.warning('导出失败')
          }
        })
      },
      cancelFn(refName, visibleName) {
        this.searchForm = {
          pageNum: 1,
          pageSize: 10
        }
        this.dialogVisible = false
      },
    }
  }
</script>

<style>

</style>
